<template>
  <div class="pile-detail-page">
    <el-row :gutter="20">
      <!-- 左侧充电站信息容器 -->
      <el-col :span="8">
        <el-card v-if="station" class="station-card" shadow="hover">
          <img :src="station.stationImgUrl" alt="站点图片" class="station-image" />
          <div class="station-info">
            <h2>{{ station.stationName }}</h2>
            <p><strong>编号：</strong>{{ station.stationCode }}</p>
            <p><strong>类型：</strong>{{ station.stationType }}</p>
            <p><strong>属性：</strong>{{ station.stationProperty }}</p>
            <p><strong>地址：</strong>{{ station.address }}</p>
            <p><strong>充电桩数量：</strong>{{ station.chargingPileCount }} 桩</p>
            <p><strong>营业时间：</strong>{{ station.openTime }} - {{ station.closeTime }}</p>
            <p>
              <strong>状态：</strong>
              <span :class="{'status-normal': station.status === '正常', 'status-issue': station.status !== '正常'}">
                {{ station.status === '正常' ? '✅ 正常' : `⚠️ ${station.status}` }}
              </span>
            </p>
            <p><strong>简介：</strong>{{ station.stationIntro }}</p>
          </div>
        </el-card>
        <el-empty v-else-if="!loading && !error" description="加载中..." />
        <el-alert v-if="error" type="error" :title="error" />
      </el-col>

      <!-- 右侧充电桩列表容器 -->
      <el-col :span="16">
        <div class="pile-container">
          <h2>充电桩列表</h2>
          <el-row :gutter="20" class="pile-row">
            <!-- 遍历电桩列表 -->
            <el-col :span="12" v-for="pile in piles" :key="pile.id">
              <el-card
                  class="pile-card"
                  shadow="hover"
                  @click="goToChargingDetails(pile.id)"
              >
                <img :src="pile.pileImgUrl" alt="充电桩图片" class="pile-image" />
                <div class="pile-info">
                  <h3>{{ pile.pileName }}</h3>
                  <p><strong>编号：</strong>{{ pile.pileCode }}</p>
                  <p><strong>类型：</strong>{{ pile.pileType }}</p>
                  <p><strong>功率：</strong>{{ pile.pilePower }} kW</p>
                  <p><strong>型号：</strong>{{ pile.pileModel }}</p>
                  <p>
                    <strong>状态：</strong>
                    <span :class="{'status-normal': pile.pileStatus === '使用中', 'status-issue': pile.pileStatus !== '使用中'}">
                      {{ pile.pileStatus === '使用中' ? '✅ 使用中' : `⚠️ ${pile.pileStatus}` }}
                    </span>
                  </p>
                  <el-divider></el-divider>
                  <div class="charging-guns" v-if="pile.chargingGuns && pile.chargingGuns.length">
                    <h4>充电枪列表</h4>
                    <ul>
                      <li v-for="gun in pile.chargingGuns" :key="gun.id">
                        {{ gun.gunName }} ({{ gun.gunType }}) - {{ gun.outputPower }} kW
                      </li>
                    </ul>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 数据为空时显示占位提示 -->
          <el-empty v-if="piles.length === 0 && !loading && !error" description="暂无电桩数据"></el-empty>
          <!-- 显示加载动画 -->
          <el-loading v-if="loading" :fullscreen="true" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from "axios";

export default {
  name: 'PileList',
  setup() {
    const route = useRoute()
    const router = useRouter()

    const stationId = route.params.stationId
    const station = ref(null) // 存储充电站信息
    const piles = ref([]) // 存储充电桩列表
    const loading = ref(true)
    const error = ref(null)

    // 创建自定义 axios 实例
    const apiClient = axios.create({
      baseURL: 'http://localhost:8080', // 指定 8080 端口
      timeout: 5000, // 设置超时时间
    });

    // 获取充电站信息及充电桩列表
    const fetchStationData = async () => {
      try {
        const { data } = await apiClient.get(`/station/getStationById/${stationId}`);
        console.log('获取充电站信息成功', data);
        station.value = data.station;
        piles.value = data.chargingPiles;
      } catch (err) {
        console.error('获取充电站信息失败', err);
        error.value = '无法加载充电站信息';
      } finally {
        loading.value = false;
      }
    };

    const goToChargingDetails = (pileId) => {
      router.push({ name: 'chargingpileDetail', params: { pileId, stationId } });
    };

    onMounted(() => {
      fetchStationData();
    });

    return {
      station,
      piles,
      goToChargingDetails,
      loading,
      error,
      apiClient,
    }
  }
}
</script>
<style scoped>
/* 页面整体布局 */
.pile-detail-page {
  padding: 20px;
}

/* 充电站卡片样式 */
.station-card {
  border-radius: 8px;
  overflow: hidden;
}
.station-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.station-info {
  padding: 15px;
}
.station-info h2 {
  margin-bottom: 10px;
  color: #333;
}
.station-info p {
  margin: 5px 0;
  color: #555;
}
.status-normal {
  color: green;
  font-weight: bold;
}
.status-issue {
  color: red;
  font-weight: bold;
}

/* 充电桩容器样式 */
.pile-container {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}
.pile-container h2 {
  margin-bottom: 20px;
  color: #333;
}

/* 充电桩卡片样式 */
.pile-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.pile-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.pile-info {
  padding: 15px;
}
.pile-info h3 {
  margin-bottom: 10px;
  color: #333;
}
.pile-info p {
  margin: 5px 0;
  color: #555;
}
.charging-guns {
  margin-top: 10px;
}
.charging-guns h4 {
  margin-bottom: 10px;
  color: #666;
}
.charging-guns ul {
  list-style-type: disc;
  padding-left: 20px;
}
.charging-guns li {
  margin-bottom: 5px;
  color: #555;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .pile-detail-page .el-col[span="8"] {
    span: 24;
    margin-bottom: 20px;
  }
  .pile-detail-page .el-col[span="16"] {
    span: 24;
  }
}

@media (max-width: 768px) {
  .station-info h2 {
    font-size: 1.5em;
  }
  .pile-info h3 {
    font-size: 1.2em;
  }
}
</style>
